<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, watch, onMounted, type Ref, nextTick } from 'vue';

interface iMeg {
  time1: number;
  time2: number;
  time3: number;
  time4: number;
  time5: number;
  time6: number;
  time7: number;
}


let props: any = defineProps({
  propmsg: Object,
});


// 初始化数据
const meg: Ref<iMeg> = ref({
  time1: props.propmsg?.time1?.sales || 1,
  time2: props.propmsg?.time2?.sales || 1,
  time3: props.propmsg?.time3?.sales || 1,
  time4: props.propmsg?.time4?.sales || 1,
  time5: props.propmsg?.time5?.sales || 1,
  time6: props.propmsg?.time6?.sales || 1,
  time7: props.propmsg?.time7?.sales || 1,
});

let myChart: echarts.ECharts | null = null;

// 监听 props.propmsg 的变化，更新数据
watch(
  () => props.propmsg,
  (newVal) => {
    meg.value.time1 = newVal?.time1?.sales || 1;
    meg.value.time2 = newVal?.time2?.sales || 1;
    meg.value.time3 = newVal?.time3?.sales || 1;
    meg.value.time4 = newVal?.time4?.sales || 1;
    meg.value.time5 = newVal?.time5?.sales || 1;
    meg.value.time6 = newVal?.time6?.sales || 1;
    meg.value.time7 = newVal?.time7?.sales || 1;

    // 更新图表
    if (myChart) {
      myChart.setOption({
        series: [
          {
            data: [
              meg.value.time1,
              meg.value.time2,
              meg.value.time3,
              meg.value.time4,
              meg.value.time5,
              meg.value.time6,
              meg.value.time7,
            ],
          },
        ],
      });
    }
  },
  { immediate: true, deep: true } // 立即执行且深度监听
);

// 初始化图表
onMounted(() => {

  nextTick(() => {
    const chartDom = document.getElementById('ratemain2')!;
    if (myChart) {
      myChart.dispose();
    }

    myChart = echarts.init(chartDom);

    const option: echarts.EChartsOption = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [
            meg.value.time1,
            meg.value.time2,
            meg.value.time3,
            meg.value.time4,
            meg.value.time5,
            meg.value.time6,
            meg.value.time7,
          ],
          type: 'line',
        },
      ],
    };

    myChart.setOption(option);

  })

});
</script>

<template>
  <div id="ratemain2"></div>
</template>

<style scoped lang="scss">
#ratemain2 {
  width: 100%;
  height: 100%;
}
</style>
